<div class="bs-docs-example">
    <div id="yw1" class="grid-view">
        <table class="items table table-striped">
            <thead>
                <tr>
                    <th id="yw1_c0">#</th>
                    <th id="yw1_c1">banner</th>
                    <th id="yw1_c2">vùng hiển thị</th>
                    <th id="yw1_c2">thứ tự</th>
                    <th id="yw1_c2">link</th>
                    <th class="button-column" id="yw1_c5">&nbsp;</th>
                </tr>
            </thead>
            <tbody id="ajax_data">
                <?php foreach ($banners as $item): ?>
                    <tr class="odd">
                        <td style="width: 60px" class="data_id"><?php echo $item->banner_id ?></td>
                        <td class="data_file">
                            <div style="width: 200px;overflow-x: scroll">
                                <img src="<?php echo urlImageFolder('banner') . $item->file ?>" height="50" />
                            </div>
                        </td>
                        <td class="data_area"><?php echo $item->area ?></td>
                        <td class="data_orders"><?php echo $item->orders ?></td>
                        <td class="data_link" style="width: 350px;word-break:break-all;"><?php echo $item->link ?></td>
                        <td nowrap="nowrap">
                            <a class="update" title="" data-toggle="tooltip" href="#" data-original-title="Update">
                                <i class="glyphicon glyphicon-pencil"></i>
                            </a>
                            <a class="delete" title="" data-toggle="tooltip" href="<?php echo Yii::app()->createUrl("Banner/delete/",array('id' => $item->banner_id )) ?>" data-original-title="Delete">
                                <i class="glyphicon glyphicon-trash"></i>
                            </a>
                        </td>
                    </tr>  
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>    
    <div class="clearfix"></div>
</div>
<?php
$form = $this->beginWidget(
                'booster.widgets.TbActiveForm', array(
            'htmlOptions' => array(
                'class' => 'well',
                'enctype' => 'multipart/form-data',
                'action' => Yii::app()->createUrl("Banner/add/"),
                'id' => 'ajax_banner'
            ),
                )
);
?>
<?php
echo $form->dropDownListGroup(
        $model, 'area', array(
    'widgetOptions' => array(
        'data' => getAreaBanner(),
    )
        )
);
echo $form->textFieldGroup($model, 'link');
echo $form->textFieldGroup($model, 'orders');
echo $form->fileFieldGroup($model, 'file');
?>
<div id="banner_image">
    
</div>
<br/>
<?php
echo $form->hiddenField($model, 'object', array('type' => "hidden", 'size' => 2, 'maxlength' => 2));
echo $form->hiddenField($model, 'type', array('type' => "hidden", 'size' => 2, 'maxlength' => 2));
?>
<input type="hidden" name="id" value="0" id="banner_id"/>
<button type="button" class="btn btn-default" id="button_ajax">Thêm Banner</button>
<button type="button" class="btn btn-default" id="button_clear" style="display: none">Xóa dữ liệu để thêm mới</button>
<?php
$this->endWidget();
unset($form);
?>

<script>
    //clear form
    function clearBanner(){
            $('#ajax_banner').trigger('reset');
            $('#Banner_area').val('top');
            $('#Banner_link').val("");
            $('#Banner_orders').val(1);
            $('#banner_id').val(0);
            $('#banner_image').html("");
            $('#button_ajax').text('Thêm banner');
            $('#button_clear').hide();
    }
    
    
    $(document).ready(function(){
        $('#ajax_banner').attr('action','<?php echo Yii::app()->createUrl("Banner/add/") ?>');
        $('#button_ajax').on('click',function(){
            //link
            var link = $('#Banner_link').val();
            if(link.length <1){
                alert('link không được bỏ trống');
                return false;
            }
            //order
            var orders = $('#Banner_orders').val();
            if(!(!isNaN(parseInt(orders,10)) && (parseFloat(orders,10) == parseInt(orders,10)))){
                 alert('bạn hãy nhập số vào trường thứ tự');
                 return false;
            }
            //image
            if($("#banner_id").val() == 0){
                //image
                var image = $('#Banner_file').val();
                if(image.length < 1){
                    alert('image không được bỏ trống');
                    return false;
                }
                var ex = image.split('.').pop();
                if(ex != "png" && ex!= "jpg" && ex != "gif"){
                    alert('bạn chỉ được upload file png,gif hoặc jpg');
                    return false;
                }
            }
            //update banner
            $('#ajax_banner').ajaxSubmit({
                dataType: 'json',
                success: function(data){
                    if(!data.error){
                        $('#ajax_data').html(data.message);
                        clearBanner();
                    }
                }
            });
        });
        //edit banner
        $(document).on('click',"#ajax_data .update",function(){
            var parents = $(this).parents('tr');
            $('#Banner_area').val(parents.find('.data_area').text());
            $('#Banner_link').val(parents.find('.data_link').text());
            $('#Banner_orders').val(parents.find('.data_orders').text());
            $('#banner_id').val(parents.find('.data_id').text());
            $('#banner_image').html(parents.find('.data_file').html());
            $('#button_clear').show();
            $('#button_ajax').text('Sửa banner');
            return false;
        });
        //delete banner
        $(document).on('click',"#ajax_data .delete",function(){
            var url = $(this).attr('href');
            var parent = $(this).parents('tr');
            $.ajax({
                url : url,
                dataType: 'json',
                success: function(data){
                    if(data.is_deleted){
                        parent.remove();
                    }
                }
            });
            return false;
        });
        //clear data
        $('#button_clear').on('click',function(){
            clearBanner();
            $(this).hide();
        });
    });
</script>